<template>
	<view class="page">
		<view class="page-top">
			<view class="top-bar">
				<image class="logo" src="/static/logo.png" mode="aspectFit" />
				<view class="search-wrapper">
					<input class="search-input" @blur="fetchTaskList" v-model="keyword" placeholder="请输入关键字进行搜索任务" />
				</view>
				<navigator url="/pages/user/notice/notice" style="position: relative;">
					<image class="bell-icon" src="/static/icon_notification.png" mode="aspectFit" />
					<view class="red-dot"></view>
				</navigator>

			</view>

			<!-- 分类Tab -->
			<scroll-view class="nav-tabs" scroll-x show-scrollbar="false" style="height: 72rpx;">
				<view class="nav-tabs-inner">
					<view
						v-for="(tab, idx) in taskCategory"
						:key="idx"
						:class="['nav-tab', currentIndex === idx ? 'active' : '']"
						@click="changeTab(idx)"
					>
						{{ tab }}
					</view>
				</view>
			</scroll-view>
		</view>

		<navigator @click="navigaToArt"  class="banner">
			<view>
				<image mode="aspectFit" style="width: 100%;" :src="bannerIntro.cover"/>
			</view>
			<view class="banner-con" style="margin-left: -94rpx;">
				<view class="banner-con-icon">
				  <!-- 图标或图片 -->
				  <image :src="shouldIntro.cover" mode="aspectFit" style="width: 100rpx; height: 100rpx;"></image>
				</view>
				<view class="banner-con-txt">
				  <!-- 文本内容 -->
				  <text>{{ shouldIntro.title }}</text>
				</view>
			</view>
		</navigator>


		<!-- 任务卡片区 -->
		<view class="task-list task-list-container">

			<navigator
				v-for="(task, idx) in taskList"
				:key="task.title"
				class="task-card"
				:url="'/pages/taskDetails/taskDetails?id=' + task.id"
			>

				<view class="task-row-top">
					<image class="task-logo" :src="task.cover" mode="aspectFill" />
					<view class="task-content">
						<view class="task-title">{{ task.title }}</view>
						<view class="task-price">+{{ task.price }}<text class="yuan">元</text></view>
					</view>
				</view>
				<view class="task-req">要求:{{ task.is_attachment?"需要上传图片":"无需上传图片" }}</view>
			</navigator>
		</view>
	</view>

	<!-- 加载状态提示 -->
	<view v-if="loading" class="loading-text">{{noMore}}</view>
<!-- 	<view v-if="noMore" class="no-more-text">没有更多了</view> -->

	<view v-if="showProtocol" class="modal-mask">
		<view class="modal-box">
			<view class="modal-title">{{noticeIntro.title}}</view>
			<view class="modal-content">
				<rich-text :nodes="noticeIntro.content"></rich-text>
			</view>
			<view class="modal-btn-row">
				<view class="reject" @click="onReject">我知道了</view>
				<view class="agree" @click="onAgree">查看更多</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed,reactive} from 'vue';
	import { onReachBottom,onPullDownRefresh,onLoad } from "@dcloudio/uni-app"
	import { getTaskList,getTaskCategoryAll } from "@/api/task.js"
	import { getSysIntroByMark } from "@/api/sysIntro.js"
	const taskCategory = reactive({"0":"全部"});  // 改回键值对形式
	const taskCategoryId = ref('');
	const currentIndex = ref("0");
	const taskList = ref([]);  // 改为ref数组
	const page = ref(1);
	const pageSize = ref(10);
	const loading = ref(false);    // 加载状态
	const noMore = ref("加载中...");      // 是否无更多数据
	const lastPage = ref(0);
	const keyword = ref('');
	const bannerIntro = reactive({
		cover:''
	});
	const shouldIntro = reactive({
		title:"",
		cover:"",
		id:0
	});
	const noticeIntro = reactive({
		title:"",
		content:""
	});
	const showProtocol = ref(false)
	onLoad((options) => {
			console.log("indexLoad:"+options.mid);
			if(options.mid && !uni.getStorageSync("token")){
				uni.setStorageSync("mid",options.mid);
			}
	});

	const getSysIntro = async()=>{
		await getSysIntroByMark({"mark":"banner,should,notice"}).then(result=>{
			console.log(result);
			Object.assign(bannerIntro, result.find(item => item.mark === 'banner'));
			Object.assign(shouldIntro, result.find(item => item.mark === 'should'));
			Object.assign(noticeIntro, result.find(item => item.mark === 'notice'));
			showProtocol.value=true;
		})
	}

	getSysIntro();

	const onReject = ()=>{
		showProtocol.value=false;
	}

	const onAgree = ()=>{

		uni.navigateTo({
			url:`/pages/user/notice/notice`
		});
	}

	const fetchTaskList = async ()=>{
		uni.showLoading({
			title: '加载中'
		});
		try {
			let res = await getTaskList({page:page.value,pageSize:pageSize.value,task_category_id:taskCategoryId.value,title:keyword.value});
			console.log(res.data);
			if (page.value === 1) {
				// 第一页直接赋值
				taskList.value = res.data;
			} else {
				// 追加数据
				taskList.value = [...taskList.value, ...res.data];
			}
			page.value = res.current_page;
			lastPage.value = res.last_page;
		} catch (err) {
			console.error('请求失败：', err);
		}finally{
			loading.value = false;
			uni.hideLoading();
      uni.stopPullDownRefresh();
		}
	};

	fetchTaskList();

	const getTaskCategory = async ()=>{
		try {
			let res = await getTaskCategoryAll({statue:1});
			console.log('分类数据:', res);
			// 检查res是否为对象
			if (res && typeof res === 'object') {
				// 直接合并对象
				Object.assign(taskCategory, res);
			} else {
				console.error('分类数据格式不正确:', res);
			}
		} catch (err) {
			console.error('获取分类失败：', err);
		}finally{
			loading.value = false;
		}
	}

	getTaskCategory();

	const changeTab = (idx) => {
		currentIndex.value = idx;
		taskCategoryId.value = idx === "0" ? "" : idx;
		page.value = 1;
		noMore.value="加载中...";
		fetchTaskList();
	};

	// 将任务列表每两个分为一组
	const taskRows = computed(() => {
		const rows = [];
		for (let i = 0; i < tasks.length; i += 2) {
			rows.push([tasks[i], tasks[i + 1]].filter(Boolean));
		}
		return rows;
	});

	onReachBottom(()=>{
		loading.value=true;
		if(lastPage.value<=page.value){
			noMore.value="没有更多了";
			// 3秒后重置noMore状态
			setTimeout(() => {
				loading.value = false;
			}, 3000);
		}else{
			noMore.value="加载中...";
			page.value+=1;
			fetchTaskList();
		}
	});

	onPullDownRefresh(()=>{
		loading.value=false;
		noMore.value = false;
		page.value=1;
		fetchTaskList();
	});

	const navigaToArt = ()=>{
		//页面加载中不跳转
		if(loading.value) return;
		console.log(shouldIntro)
		uni.navigateTo({
			url:`/pages/index/instructions/instructions?id=${shouldIntro.id}`
		});
	}

</script>

<style scoped>
	.page {
		min-height: 100vh;
		background: #f6f7fb;
		padding-bottom: 20rpx;

	}
	.page-top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 9;
		background: #fff;
	}
	.top-bar {
		display: flex;
		align-items: center;
		height: 120rpx;
		background: #4a83f5;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
		padding: 0 24rpx;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
	}

	.right-logo {
		margin-left: 16rpx;
	}

	.bell-icon{
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
	}

	.search-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f2f3f7;
		border-radius: 40rpx;
		height: 72rpx;
		margin: 0 16rpx;
		padding: 0 24rpx;
	}

	.search-input {
		width: 100%;
		height: 72rpx;
		border: none;
		background: transparent;
		font-size: 28rpx;
		color: #333;
	}
	.nav-tabs {
		width: 100vw;
		background: #fff;
		border-bottom: 2rpx solid #f0f0f0;
		height: 72rpx;
		margin-bottom: 0;
	}
	.nav-tabs-inner {
		display: flex;
		flex-direction: row;
		width: max-content;
	}

	.nav-tab {
		flex-shrink: 0;
		white-space: nowrap;
		padding: 4rpx 36rpx;
		/* height: 72rpx; */
		line-height: 62rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 36rpx 36rpx 0 0;
		margin-right: 8rpx;
		background: transparent;
		transition: all 0.2s;

	}

	.nav-tab.active {

		border-bottom: 4rpx solid #007aff;
		font-weight: bold;
	}

	.banner{
		margin-top: 190rpx;
	}
	.task-list {

		padding: 24rpx 16rpx 0 16rpx;
		min-height: 600rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		max-width: 500px;
		margin: 0 auto;
		justify-content: center;

	}
	.task-card {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
		padding: 24rpx 24rpx;
		min-width: 0;
		max-height: 250rpx;
		margin-bottom: 16rpx;
	}
	@media (min-width: 400px) {
		.task-card {
			width: calc(50% - 12rpx);
		}
	}
	.task-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.task-row .task-card:not(:last-child) {
		margin-right: 24rpx;
	}
	.task-logo {
		width: 95rpx;
		height: 95rpx;
		border-radius: 50%;
		background: #eaf2ff;
		margin-right: 32rpx;
	}
	.task-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.task-title {
		font-size: 24rpx;
		font-weight: 400;
		color: #222;
		margin-bottom: 8rpx;
	}
	.task-price {
		font-size: 28rpx;
		color: #ff4d00;
		font-weight: bold;
		margin-bottom: 8rpx;
		text-align: right;
	}
	.yuan {
		font-size: 24rpx;
		font-weight: normal;
		margin-left: 2rpx;
	}
	.task-row-top {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 12rpx;
	}
	.task-req {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		word-break: break-all;
		background-color: #dcdfe4;
		padding: 2rpx 10rpx;
		border-radius:5rpx;
	}
	.banner{
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
	}
	/* 父容器，使用flex布局，横向排列，垂直居中 */
	.banner-con {
		display: flex;
		flex-direction: row;
		align-items: center; /* 垂直居中 */
	}

	/* 子元素各占50%宽度 */
	.banner-con-txt {
		width: 50%;
		display: flex;
		align-items: center;     /* 垂直居中内容（可选） */
		box-sizing: border-box;
	}

	.banner-con-icon {
	display: flex;
	justify-content: flex-end; /* 图片靠右 */
	align-items: center;       /* 垂直居中 */
	width: 50%;
	box-sizing: border-box;
	}

  .banner-con-txt{
	  text-align: left;
  }
  .loading-text, .no-more-text {
    text-align: center;
    padding: 20rpx;
    color: #999;
	background: #f6f7fb;;
  }
  .red-dot {
  	position: absolute;
  	top: 8rpx;
  	right: 8rpx;
  	width: 14rpx;
  	height: 14rpx;
  	background: #ff2d2d;
  	border-radius: 50%;
  	border: 4rpx solid #fff;
  }

  .task-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx;
  }

  .task-card {
    width: 48%; /* 每行显示两个卡片 */
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
  }
.modal-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-box {
	width: 80vw;
	max-width: 600rpx;
	background: #fff;
	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.10);
	display: flex;
	flex-direction: column;

}
.modal-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #222;
	margin-bottom: 12rpx;
	text-align: center;
	padding-top: 30rpx;
}
.modal-subtitle {
	font-size: 24rpx;
	color: #888;
	margin-bottom: 18rpx;
}
.modal-content {

	font-size: 24rpx;
	color: #333;
	margin-bottom: 32rpx;
	padding: 10rpx 20rpx;
}
.modal-content text {
	display: block;
	margin-bottom: 12rpx;
	line-height: 1.7;
	padding: 40rpx;

}
.modal-btn-row {
	display: flex;
	width: 100%;
	/* justify-content: space-between; */
	display: flex;
	border-top: 1rpx solid #dcdfe4;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 400;
	font-size: 24rpx;
}

.reject {
	color: green;
	text-align: center;
	flex: 1;

}
.agree {
	border-left: 1rpx solid #dcdfe4;
	color: #4a83f5;
	text-align: center;
	flex: 1;
}
</style>
